<template>
  <Header :title="'生成订单'" />
  <div class="user_info">
    <div>
      <p>
        <span>{{ address.username }}</span
        ><span>{{ address.phone_number }}</span>
      </p>
      <p>
        {{ address.province }}{{ address.city }}{{ address.county }}
        {{ address.addressDetail }}
      </p>
    </div>
    <div v-show="!address.username">请选择地址</div>
    <div><van-icon name="arrow" class="allow" @click="toAddress" /></div>
  </div>
  <div class="goods_list">
    <div class="" v-for="item in list" :key="item.shop_id">
      <van-card
        :num="item.shop_count"
        :price="item.shop_price"
        :desc="item.shop_dec"
        :title="item.shop_name"
        :thumb="item.shop_img"
      />
    </div>
  </div>

  <div class="order_bottom">
    <div class="order_price">
      <span>商品价格</span><span class="price">￥{{ price }}</span>
    </div>
    <div>
      <van-button
        type="primary"
        size="large"
        style="display: block; width: 100%"
        @click="orderSubmit"
        >生成订单</van-button
      >
    </div>
  </div>

  <van-popup
    v-model:show="show"
    closeable
    position="bottom"
    :style="{ height: '30%' }"
    @click-close-icon="onClickCloseIcon"
    class="popup"
  >
    <div style="width: 90%; margin: 0px auto; padding: 50px 0px">
      <van-button type="primary" size="large" class="btn1" @click="Pay"
        >微信支付</van-button
      >
      <van-button type="primary" size="large" @click="Pay" class="btn2"
        >支付宝支付</van-button
      >
    </div>
  </van-popup>
</template>
<script setup>
import Header from "@/components/SHeader.vue";
import { useRoute, useRouter } from "vue-router";
import { onMounted, computed, ref, reactive } from "vue";
import { orderCreate } from "@/api/cart";
import { addressInfo } from "@/api/address";
const route = useRoute();
const list = ref([]);
const show = ref(false);
onMounted(() => {
  list.value = JSON.parse(localStorage.getItem("tempData"));
});
const price = computed(() => {
  const res = list.value.reduce((pre, cur) => {
    return cur.shop_price * cur.shop_count + pre;
  }, 0);
  return res;
});
const router = useRouter();
const toAddress = () => {
  router.push({ path: "addresslist" });
};
const orderSubmit = async () => {
  show.value = true;
};
// 支付失败
const onClickCloseIcon = async () => {
  const arr = list.value.map((item) => item.shop_id);
  await orderCreate({ arr, isPay: 0 }).then((res) => {
    router.push("myorder");
  });
};
// 支付成功
const Pay = async () => {
  const arr = list.value.map((item) => item.shop_id);
  await orderCreate({ arr, isPay: 1 }).then((res) => {
    router.push("myorder");
  });
};
const address = reactive({
  username: "",
  phone_number: "",
  province: "",
  city: "",
  county: "",
  addressDetail: "",
});

const getAddress = async () => {
  // console.log(route.from);
  const id = localStorage.getItem("address_id");
  if (id) {
    const { data } = await addressInfo(id);
    const { username, phone_number, province, city, county, addressDetail } = data.res[0];
    address.username = username;
    address.phone_number = phone_number;
    address.province = province;
    address.city = city;
    address.county = county;
    address.addressDetail = addressDetail;
  }
};
getAddress();
</script>
<style lang="scss" scoped>
.user_info {
  background-color: #f9f9f9;
  text-align: left;
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
  align-items: center;
  border-bottom: 2px solid;
  //   -o-border-image: linear-gradient(#87b636, #3c69a2, #552db3) 1 10 1;
  border-image: linear-gradient(#606da1, #c7cf24, #552db3) 1 10 1;

  span {
    margin-right: 20px;
  }

  .allow {
    font-weight: bold;
  }
}

.goods_list {
  height: calc(100vh - 250px);
  overflow-x: hidden;
  overflow-y: scroll;
}

.order_bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  padding: 10px 0;
  border-top: 1px solid #e9e9e9;
  z-index: 1000;

  .order_price {
    display: flex;
    justify-content: space-between;
    margin: 10px 20px;
    font-weight: 600;

    .price {
      color: red;
    }

    .price::first-letter {
      font-size: 12px;
    }
  }
}
.popup {
}
.btn1,
.btn2 {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
.btn2 {
  columns: white;
  background: rgb(79, 192, 141);
  border-color: rgb(79, 192, 141);
}
</style>
<style>
.van-card__content {
  text-align: left;
}
</style>
